<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background: skyblue;
            position: absolute;
            left: 0px;
            top: 0px;
        }
    </style>
</head>

<body>
    <div class="box"></div>
    <script type="module">
        // 获取方块当前left值
        let boxEl = document.querySelector('.box')

        // 向右移动
        // let timer = setInterval(() => {
        //     let offset$ = parseInt(getComputedStyle(boxEl, null)['left'])
        //     let dist = 5

        //     boxEl.style.left = offset$ + dist + 'px'

        //     if (offset$ == 300) {
        //         clearInterval(timer)
        //     }
        //     console.log(offset$)
        // }, 30)


        // 向下移动
        function move(place, end, cb) {
            let timer = setInterval(() => {
                let offset$ = parseInt(getComputedStyle(boxEl, null)[place])
                let dist = 10 * (end > offset$ ? 1 : -1)

                boxEl.style[place] = offset$ + dist + 'px'

                if (offset$ == end) {
                    clearInterval(timer)
                    cb()
                }
                console.log(offset$)
            }, 25)
        }

        function fn() {
            move('left', 300, function () {
                move('top', 300, function () {
                    move('left', 0, function () {
                        move('top', 0, function () {
                            fn()
                        })
                    })
                })
            })
        }
        fn()











    </script>
</body>

</html>